<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
        >
          <a-form-item
            label="任务名称"
            name="jobName"
            :rules="[{ required: true, message: '输入任务名称' }]"
          >
            <a-input
              v-model:value="formData.jobName"
              placeholder="输入任务名称"
            />
          </a-form-item>
          <a-form-item
            label="任务组名"
            name="jobGroup"
            :rules="[{ required: true, message: '输入任务组名' }]"
          >
            <a-input
              v-model:value="formData.jobGroup"
              placeholder="输入任务组名"
            />
          </a-form-item>
          <a-form-item
            label="调用方法"
            name="invokeTarget"
            :rules="[{ required: true, message: '输入调用方法' }]"
          >
            <a-input
              v-model:value="formData.invokeTarget"
              placeholder="输入调用目标字符串"
            />
          </a-form-item>
          <a-form-item
            label="cron表达式"
            name="cronExpression"
            :rules="[{ required: true, message: '输入cron表达式' }]"
          >
            <a-input
              v-model:value="formData.cronExpression"
              placeholder="请输入cron表达式"
            >
              <template #addonAfter>
                <span @click="handleChangeCron" style="cursor: pointer"
                  >cron表达式</span
                >
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            label="执行策略"
            name="misfirePolicy"
            :rules="[{ required: true, message: '请选择执行策略' }]"
          >
            <a-radio-group
              v-model:value="formData.misfirePolicy"
              button-style="solid"
            >
              <a-radio-button :value="1">立即执行</a-radio-button>
              <a-radio-button :value="2">执行一次</a-radio-button>
              <a-radio-button :value="3">放弃执行</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="是否并发"
            name="concurrent"
            :rules="[{ required: true, message: '请选择是否并发' }]"
          >
            <a-radio-group
              v-model:value="formData.concurrent"
              button-style="solid"
            >
              <a-radio-button :value="0">允许</a-radio-button>
              <a-radio-button :value="1">禁止</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
            <div class="btns center">
              <a-space>
                <a-button @click="handleCloseDialog">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
              </a-space>
            </div>
          </a-form-item>
        </a-form>
      </a-space>
    </a-modal>
    <a-modal v-model:open="isShowCronCore" title="cron表达式" :footer="null">
      <div style="width: 100%; padding-left: 10px; margin-top: -5px">
        <Crontab
          @hide="state.cronTab = falsre"
          @fill="crontabFill"
          :expression="state.editForm.CronExpression"
        />
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { taskAdd, taskUpdate } from "@/api/task";
import Crontab from "./Crontab/index.vue";
import { message } from "ant-design-vue";
const isShowCronCore = ref(false);
const modalOpen = ref(false);
const formData = ref({
  jobName: undefined,
  jobGroup: undefined,
  invokeTarget: undefined,
  cronExpression: undefined,
  misfirePolicy: 1,
  concurrent: 1,
  status: 1,
  remark: undefined,
});
const formRef = ref(null);
const title = ref("");
const open = (titles, record) => {
  title.value = titles;
  modalOpen.value = true;
  if (JSON.stringify(record) !== "{}") {
    formData.value = record;
  }
};
function handleCloseDialog() {
  modalOpen.value = false;
  formData.value = {};
  formRef.value.resetFields();
}
function crontabFill(val) {
  formData.value.cronExpression = val;
  isShowCronCore.value = false;
}
const state = reactive({
  cronTab: false,
  editForm: {
    CronExpression: "0 0 0 * * ? *",
  },
});

const emits = defineEmits(["refreshList"]);
function handleSubmit() {
  formRef.value.validate().then(() => {
    if (title == "编辑任务") {
      taskUpdate(formData.value).then((res) => {
        if (res.code === 200) {
          handleCloseDialog();
          message.success("编辑成功");
          emits("refreshList");
        }
      });
    } else {
      taskAdd(formData.value).then((res) => {
        if (res.code === 200) {
          handleCloseDialog();
          message.success("添加成功");
          emits("refreshList");
        }
      });
    }
  });
}

function handleChangeCron() {
  isShowCronCore.value = true;
}
defineExpose({ modalOpen, open });
</script>
